<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/marketingchannels' }"
          >渠道管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/marketingchannels' }"
          >流量渠道管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>渠道详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="渠道数据" name="1">
          <div class="channelList">
            <!-- 基本数据 -->
            <div class="title">基础数据</div>
            <div class="box1">
              <div class="box1-list">
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.todayUv | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">今日UV</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.todayRegister | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">今日注册</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.todayPv | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">今日PV</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.todayIp | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">今日IP</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.todayLogin | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">今日登录</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.todayIpa | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">今日ipa接口实名数</p>
                </div>
                <!-- <div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.todayChannelOver|NumFormat}}</p>
									<p class="box1-list-li-title">今日完件</p>
								</div>
								<div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.todayChannelCredit|NumFormat}}</p>
									<p class="box1-list-li-title">今日授信成功</p>
								</div>
								<div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.todayChannelLoan|NumFormat}}</p>
									<p class="box1-list-li-title">今日放款订单</p>
								</div>
								<div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.todayChannelAmount|NumFormat}}</p>
									<p class="box1-list-li-title">今日放款总额</p>
								</div> -->
              </div>
              <div class="box1-list">
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.totalUv | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">累计UV</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.totalRegister | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">累计注册</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.totalPv | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">累计PV</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.totalIp | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">累计IP</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.totalLogin | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">累计登录</p>
                </div>
                <div class="box1-list-li">
                  <p class="box1-list-li-pir" v-if="jsonObject.baseObject">
                    {{ jsonObject.baseObject.totalIpa | NumFormat }}
                  </p>
                  <p class="box1-list-li-title">累计ipa接口实名数</p>
                </div>
                <!-- <div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.totalChannelOver|NumFormat}}</p>
									<p class="box1-list-li-title">累计完件</p>
								</div>
								<div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.totalChannelCredit|NumFormat}}</p>
									<p class="box1-list-li-title">累计授信成功</p>
								</div>
								<div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.totalChannelLoan|NumFormat}}</p>
									<p class="box1-list-li-title">累计放款订单</p>
								</div>
								<div class="box1-list-li">
									<p class="box1-list-li-pir" v-if="jsonObject.baseObject">{{jsonObject.baseObject.totalChannelAmount|NumFormat}}</p>
									<p class="box1-list-li-title">累计放款总额</p>
								</div> -->
              </div>
            </div>

            <div class="title" style="margin-top: 20px; margin-bottom: 15px">
              访问数据
            </div>
            <!-- 查询行 -->
            <el-row :gutter="20">
              <el-col :span="6">
                <el-date-picker
                  v-model="value4"
                  type="daterange"
                  start-placeholder="统计开始日期"
                  end-placeholder="统计结束日期"
                  value-format="yyyy-MM-dd"
                  @change="changeDate4"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="8">
                <el-button
                  style="margin-left: 20px"
                  class="btnprimary"
                  @click="getdataList"
                  >搜索</el-button
                >
                <el-button @click="clear1">清空</el-button>
              </el-col>
            </el-row>
            <!-- 统计表 -->
            <el-table :data="tongjiList" border stripe>
              <el-table-column label="日期" prop="date"></el-table-column>
              <el-table-column label="PV" prop="pv"></el-table-column>
              <el-table-column label="UV" prop="uv"></el-table-column>
              <el-table-column label="注册" prop="register"></el-table-column>
              <el-table-column label="扣量" prop="registerkl"></el-table-column>
              <el-table-column label="登录" prop="login"></el-table-column>
              <el-table-column
                label="ipa接口实名数"
                prop="ipa"
              ></el-table-column>
              <el-table-column label="下载量" prop="download"></el-table-column>
              <el-table-column label="新用户" prop="newuser"></el-table-column>
              <el-table-column label="老用户" prop="olduser"></el-table-column>
              <el-table-column
                label="贷超总IP"
                prop="loanMarket"
              ></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="seachlist1.pageNum"
              :page-size="seachlist1.pageSize"
              background
              :page-sizes="[10, 20]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="seachlist1.total"
            >
            </el-pagination>

            <!-- 近七天注册数据折线图 -->
            <p>近七天注册</p>
            <div class="echarts-main" id="channelRegisterList"></div>
            <p>近七天放款</p>
            <div class="echarts-main" id="channelLoanList"></div>
            <!-- 近七天用信数据折线图 -->
            <div class="related">
              <div class="box relatedbox">
                <div class="box-title">首借偏好</div>
                <el-row class="boxel-row" :gutter="20">
                  <el-col :span="7"
                    ><div class="bg-purple">借款期限</div></el-col
                  >
                  <el-col :span="7"><div class="bg-purple">人数</div></el-col>
                  <el-col :span="7"><div class="bg-purple">占比</div></el-col>
                </el-row>
                <el-row
                  class="boxel-row"
                  :gutter="20"
                  v-for="(item, index) in jsonObject.channelFirstByPeriod"
                >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.period }}期</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.count }}</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.rate }}%</div></el-col
                  >
                </el-row>
              </div>
              <div class="box relatedbox">
                <div class="box-title">首借金额</div>
                <el-row class="boxel-row" :gutter="20">
                  <el-col :span="7"
                    ><div class="bg-purple">金额区间</div></el-col
                  >
                  <el-col :span="7"><div class="bg-purple">人数</div></el-col>
                  <el-col :span="7"><div class="bg-purple">占比</div></el-col>
                </el-row>
                <el-row
                  class="boxel-row"
                  :gutter="20"
                  v-for="(item, index) in jsonObject.channelLoanByMoneyVOList"
                >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.tital }}</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.count }}</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.rate }}%</div></el-col
                  >
                </el-row>
              </div>
              <div class="box relatedbox">
                <div class="box-title">复借偏好</div>
                <el-row class="boxel-row" :gutter="20">
                  <el-col :span="7"
                    ><div class="bg-purple">借款期限</div></el-col
                  >
                  <el-col :span="7"><div class="bg-purple">人数</div></el-col>
                  <el-col :span="7"><div class="bg-purple">占比</div></el-col>
                </el-row>
                <el-row
                  class="boxel-row"
                  :gutter="20"
                  v-for="(item, index) in jsonObject.channelSecondByPeriod"
                >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.period }}期</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.count }}</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.rate }}%</div></el-col
                  >
                </el-row>
              </div>
              <div class="box relatedbox">
                <div class="box-title">复借金额</div>
                <el-row class="boxel-row" :gutter="20">
                  <el-col :span="7"
                    ><div class="bg-purple">金额区间</div></el-col
                  >
                  <el-col :span="7"><div class="bg-purple">人数</div></el-col>
                  <el-col :span="7"><div class="bg-purple">占比</div></el-col>
                </el-row>
                <el-row
                  class="boxel-row"
                  :gutter="20"
                  v-for="(
                    item, index
                  ) in jsonObject.channelTotalLoanByMoneyVOList"
                >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.tital }}</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.count }}</div></el-col
                  >
                  <el-col :span="7"
                    ><div class="bg-purple">{{ item.rate }}%</div></el-col
                  >
                </el-row>
              </div>
              <!-- <div class="box relatedbox">
								<div class="box-title">年龄分布</div>
								<el-row :gutter="20">
									<el-col :span="7"><div class="bg-purple">年龄区间</div></el-col>
									<el-col :span="7"><div class="bg-purple">人数</div></el-col>
									<el-col :span="7"><div class="bg-purple">占比</div></el-col>
								</el-row>
							</div>
							<div class="box relatedbox">
								<div class="box-title">地域分布（top5）</div>
								<el-row :gutter="20">
									<el-col :span="7"><div class="bg-purple">地点</div></el-col>
									<el-col :span="7"><div class="bg-purple">人数</div></el-col>
									<el-col :span="7"><div class="bg-purple">占比</div></el-col>
								</el-row>
							</div> -->
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户列表" name="2">
          <div class="channelList">
            <el-row :gutter="20">
              <el-col :span="3">
                <el-input
                  v-model="seachlist.phone"
                  placeholder="输入手机号"
                ></el-input>
              </el-col>
              <el-col :span="3">
                <el-input
                  v-model="seachlist.custName"
                  placeholder="输入姓名"
                ></el-input>
              </el-col>
              <!-- <el-col :span="3">
								<el-select v-model="seachlist.grantType" placeholder="选择放款状态">
									<el-option value="" label="请选择放款状态"></el-option>
								    <el-option key="G3" label="放款成功" value="G3"></el-option>
								  </el-select>
							</el-col>
							<el-col :span="3">
								<el-select v-model="seachlist.creditType" placeholder="选择授信状态">
									<el-option value="" label="请选择授信状态"></el-option>
								    <el-option key="common" label="授信成功" value="common"></el-option>
								  </el-select>
							</el-col> -->
              <el-col :span="6">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  start-placeholder="注册开始日期"
                  end-placeholder="注册结束日期"
                  value-format="yyyy-MM-dd"
                  @change="changeDate"
                >
                </el-date-picker>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  start-placeholder="申请开始时间"
                  end-placeholder="申请结束日期"
                  value-format="yyyy-MM-dd"
                  @change="changeDate2"
                >
                </el-date-picker>
              </el-col>
              <!-- <el-col :span="6">
								<el-date-picker
								  v-model="value3"
								  type="daterange"
								start-placeholder="放款开始日期"
								end-placeholder="放款结束日期"
								  value-format="yyyy-MM-dd"
								  @change="changeDate3">
								</el-date-picker>
							</el-col> -->
              <el-col :span="6">
                <el-button class="btnprimary" @click="getList">搜索</el-button>
                <el-button @click="clear">清空</el-button>
              </el-col>
            </el-row>

            <el-table :data="listData" border stripe>
              <!-- <el-table-column label="客户编号" prop="custNo"></el-table-column> -->
              <el-table-column label="手机号">
                <template slot-scope="scope">
                  <span
                    style="color: #0066cc"
                    @click="toUser(scope.row.phone)"
                    >{{ scope.row.phone }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column label="姓名" prop="custName"></el-table-column>
              <el-table-column label="性别" prop="sex">
                <template slot-scope="scope">
                  <span v-if="scope.row.sex">{{
                    scope.row.sex == "F" ? "女" : "男"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="身份证号" prop="idCard"></el-table-column>
              <el-table-column
                label="注册时间"
                prop="createTime"
              ></el-table-column>
              <!-- <el-table-column label="授信状态">
								<template slot-scope="scope">
									<el-tag v-if="scope.row.creditType == 'reject'" type="danger">授信拒绝</el-tag>
									<el-tag v-if="scope.row.creditType == 'init'" type="warning">额度初始化</el-tag>
									<el-tag v-if="scope.row.creditType == 'in'" type="warning">授信中</el-tag>
									<el-tag v-if="scope.row.creditType == 'common'" type="success">授信成功</el-tag>
								</template>
							</el-table-column> -->
              <!--<el-table-column label="授信额度" prop="creditAmount">
								 <template slot-scope="scope">
									<span>{{scope.row.creditAmount.split('.')[0]}}</span>
								</template> 
							</el-table-column>-->
              <!--<el-table-column label="可用额度" prop="usableAmount">
								 <template slot-scope="scope">
									<span>{{scope.row.usableAmount.split('.')[0]}}</span>
								</template> 
							</el-table-column>-->
              <!-- <el-table-column label="借款提交时间" prop="applyTime"></el-table-column> -->
              <!-- <el-table-column label="借款金额" prop="loanAmount">
								<template slot-scope="scope">
									<span>{{scope.row.loanAmount.split('.')[0]}}</span>
								</template> 
							</el-table-column>-->
              <!-- <el-table-column label="申请期限" prop="loanDeadline"></el-table-column>
							<el-table-column label="借款成功时间" prop="grantTime"></el-table-column>
							<el-table-column label="放款状态">
								<template slot-scope="scope">
									<span v-if="scope.row.auditStatus == 'G3'">成功</span>
									<span v-if="scope.row.auditStatus == 'G2'">处理中</span>
									<span v-if="scope.row.auditStatus == 'G4'">失败</span>
									<span v-if="scope.row.auditStatus == ''">{{scope.row.auditStatus}}</span>
								</template>
							</el-table-column>
							<el-table-column label="还款状态" prop="repaymentStatus">
								<template slot-scope="scope">
									<span v-if="scope.row.repaymentStatus == '10'">还款中</span>
									<span v-if="scope.row.repaymentStatus == '11'">结清</span>
									<span v-if="scope.row.repaymentStatus == '20'">逾期</span>
									<span v-if="scope.row.repaymentStatus == ''">{{scope.row.repaymentStatus}}</span>
								</template>
							</el-table-column> -->
            </el-table>
            <div
              style="text-align: right; font-size: 16px; margin-top: 0.625rem"
            >
              {{ "总金额：" + sumpire }}元
            </div>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
var that;
import echarts from "echarts";
export default {
  data() {
    return {
      activeName: "1",
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      seachlist: {
        startTime: "",
        endTime: "",
        phone: "",
        custName: "",
        grantType: "",
        creditType: "",
        applyStartTime: "",
        applyEndTime: "",
        grantStartTime: "",
        grantEndTime: "",
      },
      seachlist1: {
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      listData: [],
      pageSize: 20,
      pageNum: 1,
      total: 0,
      sumpire: "",
      jsonObject: [],
      tongjiList: [],
    };
  },
  created() {
    that = this;
    this.getList();
    this.getdataList();
  },
  filters: {
    NumFormat(value) {
      if (!value)
        return "0"; /*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
      var intPart = Number(value) | 0; //获取整数部分
      var intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); //将整数部分逢三一断
      var floatPart = ""; //预定义小数部分 // console.log(888,value) // console.log(888,typeof(value))
      var value2Array = value.toString().split(".");
      var isNegtiveNo = "";
      if (intPartFormat == 0) {
        if (value.toString().indexOf("-") != 1) isNegtiveNo = "-"; //修复小于0负数丢失的问题
      } //=2表示数据有小数位
      if (value2Array.length == 2) {
        floatPart = value2Array[1].toString(); //拿到小数部分
        if (floatPart.length == 1) {
          //补0,实际上用不着
          return isNegtiveNo + intPartFormat + "." + floatPart + "0";
        } else {
          return isNegtiveNo + intPartFormat + "." + floatPart;
        }
      } else {
        return isNegtiveNo + intPartFormat + floatPart;
      }
    },
  },
  methods: {
    clear() {
      this.seachlist = {
        startTime: "",
        endTime: "",
        phone: "",
        custName: "",
        grantType: "",
        creditType: "",
        applyStartTime: "",
        applyEndTime: "",
        grantStartTime: "",
        grantEndTime: "",
      };
      this.getList();
    },
    clear1() {
      this.seachlist1 = {
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
        total: 0,
      };
      this.value4 = "";
      this.getdataList();
    },
    handleClick() {
      // console.log(this.activeName);
    },
    async getList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var id = this.$route.query.channelCode;
      const { data: res } = await this.$http.post(
        "/outLinkChannel/staticSelfChannel",
        {
          channelCode: id,
          pageCount: this.pageNum,
          pageSize: this.pageSize,
          startTime: this.seachlist.startTime,
          endTime: this.seachlist.endTime,
          phone: this.seachlist.phone,
          custName: this.seachlist.custName,
          grantType: this.seachlist.grantType,
          creditType: this.seachlist.creditType,
          applyStartTime: this.seachlist.applyStartTime,
          applyEndTime: this.seachlist.applyEndTime,
          grantStartTime: this.seachlist.grantStartTime,
          grantEndTime: this.seachlist.grantEndTime,
        }
      );
      console.log(res);
      this.listData = res.data.jsonObject.staticChannelVOList;
      // this.sumpire = res.data.jsonObject.totalAmount.split('.')[0]
      this.sumpire = res.data.jsonObject.totalAmount;
      this.total = res.data.total;
      setTimeout(() => {
        loading.close();
      }, 500);
    },
    async getdataList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      var id = this.$route.query.channelCode;
      const { data: res } = await this.$http.post(
        "/outLinkChannel/staticSelfChannelData",
        {
          channelCode: id,
          pageCount: this.seachlist1.pageNum,
          pageSize: this.seachlist1.pageSize,
          startTime: this.seachlist1.startTime,
          endTime: this.seachlist1.endTime,
        }
      );
      console.log(res);
      this.jsonObject = res.data.jsonObject;
      this.tongjiList = res.data.jsonObject.channelStatisticsList;
      this.seachlist1.total = res.data.jsonObject.countList;
      var loandayTime = [];
      var loanlist = [];
      var registerdayTime = [];
      var registerlist = [];
      this.jsonObject.channelLoanList.forEach((item, index) => {
        loandayTime.push(item.time);
        loanlist.push(item.grantAmount);
      });
      this.jsonObject.channelRegisterList.forEach((item, index) => {
        registerdayTime.push(item.time);
        registerlist.push(item.count);
      });
      var loanMax = this.getMax(loanlist);
      var registerMax = this.getMax(registerlist);
      this.showLine(
        "channelRegisterList",
        registerdayTime,
        registerlist,
        registerMax,
        "注册量"
      );
      this.showLine(
        "channelLoanList",
        loandayTime,
        loanlist,
        loanMax,
        "放款量"
      );
      setTimeout(() => {
        loading.close();
      }, 500);
    },
    getMax(maxArry) {
      var max = Math.max.apply(null, maxArry);
      var maxInt = max + 5 - (max % 5);
      return maxInt;
    },
    showLine(id, dayTime, vArray, lineMax, name) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(id));
      // 指定图表的配置项和数据
      var yesterdayOption = {
        color: ["#a4bbfa"],
        tooltip: {},
        legend: {
          data: [name],
        },
        xAxis: {
          data: dayTime,
          // type: 'category',
          boundaryGap: false,
        },
        yAxis: {
          splitNumber: 5,
          min: 0,
          max: lineMax,
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: name,
            type: "line",
            data: vArray,
            areaStyle: {},
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(yesterdayOption);
    },
    changeDate(e) {
      if (e == null) {
        this.seachlist.startTime = "";
        this.seachlist.endTime = "";
      } else {
        this.seachlist.startTime = e[0];
        this.seachlist.endTime = e[1];
      }
    },
    changeDate2(e) {
      if (e == null) {
        this.seachlist.applyStartTime = "";
        this.seachlist.applyEndTime = "";
      } else {
        this.seachlist.applyStartTime = e[0];
        this.seachlist.applyEndTime = e[1];
      }
    },
    changeDate3(e) {
      if (e == null) {
        this.seachlist.grantStartTime = "";
        this.seachlist.grantEndTime = "";
      } else {
        this.seachlist.grantStartTime = e[0];
        this.seachlist.grantEndTime = e[1];
      }
    },
    changeDate4(e) {
      if (e == null) {
        this.seachlist1.startTime = "";
        this.seachlist1.endTime = "";
      } else {
        this.seachlist1.startTime = e[0];
        this.seachlist1.endTime = e[1];
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getList();
    },
    handleSizeChange1(val) {
      // console.log(`每页 ${val} 条`);
      this.seachlist1.pageSize = val;
      this.getdataList();
    },
    handleCurrentChange1(val) {
      // console.log(`当前页: ${val}`);
      this.seachlist1.pageNum = val;
      this.getdataList();
    },
    toUser(phone) {
      this.$router.push({ path: "/user", query: { phone: phone } });
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-editor {
  margin-right: 10px;
  margin-left: 10px;
}
.title {
  font-size: 18px;
  color: #333333;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts-main {
  width: 100%;
  height: 400px;
}
.bg-purple {
  color: #777777;
  font-size: 14px;
  display: flex;
  text-align: center;
  div {
    width: 86px;
  }
  span {
    margin-left: 8px;
    color: #333333;
  }
}
.related {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .relatedbox {
    width: 47%;
    margin-top: 10px;
  }
}
.el-range-editor.el-input__inner {
  width: 100%;
}
.boxel-row {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  .bg-purple {
    text-align: center;
  }
}
.box {
  border: 1px solid #d8d8d8;
  margin-top: 16px;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}
.box:hover {
  box-shadow: 0px 6px 10px 0px rgba(56, 120, 234, 0.16);
  border-radius: 4px;
  border: 1px solid #3878ea;
}
.box1-list-li-pir {
  font-size: 18px;
  color: #3878ea;
}
.box1-list-li-title {
  font-size: 14px;
  color: #333333;
  margin-top: 4px;
}
.box1-list-li-text {
  font-size: 11px;
  color: #999999;
}
.box1 {
  border-radius: 4px;
  border: 1px solid #d8d8d8;
  margin-top: 16px;
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  .box1-hr {
    width: 2px;
    height: 40px;
    background: #ededed;
    border-radius: 1px;
  }
  .box1-list {
    display: flex;
    height: 96px;
    width: 100%;
    .box1-list-li {
      padding-top: 20px;
      width: 14%;
      text-align: center;
      // cursor: pointer;
    }

    p {
      padding: 0;
      margin: 0;
    }

    .box1-list-li:hover {
      box-shadow: 0px 6px 10px 0px rgba(56, 120, 234, 0.16);
      border-radius: 4px;
      border: 1px solid #3878ea;
      .box1-list-li-pir {
        font-weight: bold;
      }
    }
  }
}
</style>
